<template>
  <div>
    <a-modal
      :visible="visible"
      :title="t('ta-manage.title.chooseSchool')"
      :cancelText="t('button.cancel')"
      :okText="t('button.close')"
      width="60%"
      @ok="submit"
      @cancel="cancel"
    >
      <pro-query  :searchParam="searchParam"
                  :labelCol="{ span: 7 }"
                  :wrapperCol="{ span: 24 }"
                  @on-search="search"
                  @on-reset="reset"
      />
      <pro-table
        ref="tableRef"
        :fetch="fetch"
        :columns="columns"
        :operate="operate"
        :param="state.param"
        :pagination="pagination"
      >
      </pro-table>
    </a-modal>
  </div>
</template>

<script>
import {reactive} from "vue";
import { school } from "@/api/module/channel-manage";
import { useI18n } from "vue-i18n";

export default {
  name: "school",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props, content) {
    const { t } = useI18n();
    /// 数据来源 [模拟]
    const fetch = async (param) => {
      let response = await school(param);
      return {
        data: response.data.record,
      };
    };

    /// 行操作
    const operate = [
      {
        label: t('button.select'),
        event: function (record) {
          content.emit('selectUniversity', {visible: 'schoolVisible', data: record})
        }
      },
    ];

    const state = reactive({
      selectedRowKeys: [],
      param: {},
    })

    const columns = [
      { dataIndex: "code", key: "code", title: "学校编码" },
      { dataIndex: "schoolEnName", key: "schoolEnName", title: t('school-manage.label.englishName') },
      { dataIndex: "schFollowUpProgress", key: "schFollowUpProgress", title: t('school-manage.label.followProgress') },
    ]

    const cancel = () => {
      content.emit("close", "schoolVisible");
    }
    const submit = () => {
      content.emit("close", "schoolVisible");
    }
    

    const searchParam = [
      { key: "schoolEnName", type: "input", label: t('ta-manage.label.schoolName'), placeholder: t('placeholder.pleaseEnter')},
      { key: "code", type: "input", label: "学校编码", placeholder: t('placeholder.pleaseEnter')},
    ]

  const search = (value) => {
    state.param = {
      schoolCnName: value.schoolEnName || undefined
    }
  }
  const reset = (value) => {
    state.param = {}
  }

    return {
      t,
      columns,
      state,
      operate,
      fetch,
      cancel,
      searchParam,
      search,
      reset
    }
  }
}
</script>

<style scoped>

</style>
